<!DOCTYPE html><html><head>
      <title>README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      pre {
    /* 书写方向，从左到右 */
    direction: ltr;
    text-align: left;
    /* 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行 */
    white-space: pre;
    /* 单词间距 */
    word-spacing: normal;
    word-break: normal;
    overflow: auto;
    line-height: 1.65;
    tab-size: 4;
    /* 换行方式，单词内有建议换行点也不会在那里换行。只会在空白符处换行 */
    hyphens: none;
    /* color: #555; */
    font-size: 14px;
    color: #0037ff;
    background-color: #fff;
    padding: 15px 1.25em 15px;
    margin: -10px 0 30px;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 5px 8px 9px -1px rgb(0 0 0 / 3%),
        0 3px 5px 0 rgb(0 0 0 / 3%),
        2px 3px 4px -1px rgb(0 0 0 / 4%);
}

/* 如使用mac风格，pre paddingtop为30px
pre::before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    left: 12px;
    margin-top: -20px;
    position: absolute;
    width: 12px;
} */

/* 有 class="language-java"
pre[class*="language-"] {
    padding: 1em
} */

code[class*="language-"] .token.comment,
pre[class*="language-"] .token.comment,
code[class*="language-"] .token.prolog,
pre[class*="language-"] .token.prolog,
code[class*="language-"] .token.doctype,
pre[class*="language-"] .token.doctype,
code[class*="language-"] .token.cdata,
pre[class*="language-"] .token.cdata {
    color: #999988;
    /* font-style: italic */
}

code[class*="language-"] .token.punctuation .regex-source,
pre[class*="language-"] .token.punctuation .regex-source {
    color: #9f9f9f
}

code[class*="language-"] .token.regex,
pre[class*="language-"] .token.regex {
    color: #ee82ee;
}

code[class*="language-"] .namespace,
pre[class*="language-"] .namespace {
    opacity: .7
}

code[class*="language-"] .token.property,
pre[class*="language-"] .token.property {
    /* font-weight: bold; */
    color: #986801
}

code[class*="language-"] .token.boolean,
pre[class*="language-"] .token.boolean,
code[class*="language-"] .token.number,
pre[class*="language-"] .token.number,
code[class*="language-"] .token.function-name,
pre[class*="language-"] .token.function-name {
    color: #ff230f
}

code[class*="language-"] .token.tag,
pre[class*="language-"] .token.tag {
    color: #ff230f
}

code[class*="language-"] .token.symbol,
pre[class*="language-"] .token.symbol {
    color: #990073
}

code[class*="language-"] .token.selector,
pre[class*="language-"] .token.selector {
    color: #ef21df
}

code[class*="language-"] .token.attr-name,
pre[class*="language-"] .token.attr-name {
    color: #626262;
}

code[class*="language-"] .token.string,
pre[class*="language-"] .token.string {
    color: #3e9100
}

code[class*="language-"] .token.char,
pre[class*="language-"] .token.char {
    color: #606aa1
}

code[class*="language-"] .token.url,
pre[class*="language-"] .token.url {
    color: #888
}

code[class*="language-"] .token.atrule,
pre[class*="language-"] .token.atrule,
code[class*="language-"] .token.attr-value,
pre[class*="language-"] .token.attr-value {
    color: #02b100;
}

code[class*="language-"] .token.keyword,
pre[class*="language-"] .token.keyword {
    color: #ff2323;
}

code[class*="language-"] .token.function,
pre[class*="language-"] .token.function {
    color: #3e9100
}

code[class*="language-"] .token.function-variable,
pre[class*="language-"] .token.function-variable {
    /* color: #ffa000 */
}

code[class*="language-"] .token.maybe-class-name,
pre[class*="language-"] .token.maybe-class-name {
    color: #ffa000
}

code[class*="language-"] .token.property-access,
pre[class*="language-"] .token.property-access {
    color: #ff230f;
}

code[class*="language-"] .token.class-name,
pre[class*="language-"] .token.class-name {
    /* text-decoration: underline; */
    color: #ffa000
}

code[class*="language-"] .token.variable,
pre[class*="language-"] .token.variable {
    color: #008080
}

code[class*="language-"] .token.important,
pre[class*="language-"] .token.important,
code[class*="language-"] .token.bold,
pre[class*="language-"] .token.bold {
    font-weight: bold
}

code[class*="language-"] .token.italic,
pre[class*="language-"] .token.italic {
    font-style: italic
}

code[class*="language-"] .token.entity,
pre[class*="language-"] .token.entity {
    cursor: help
}

pre[data-line] {
    position: relative;
    padding: 1em 0 1em 3em
}

pre[data-line] .line-highlight-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    display: block;
    width: 100%
}

pre[data-line] .line-highlight {
    position: absolute;
    left: 0;
    right: 0;
    padding: inherit 0;
    margin-top: 1em;
    background: rgba(153, 122, 102, 0.08);
    background: linear-gradient(to right, rgba(153, 122, 102, 0.1) 70%, rgba(153, 122, 102, 0));
    pointer-events: none;
    line-height: inherit;
    white-space: pre
}

pre[data-line] .line-highlight:before,
pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-start);
    position: absolute;
    top: .4em;
    left: .6em;
    min-width: 1em;
    padding: 0 .5em;
    background-color: rgba(153, 122, 102, 0.4);
    color: #f5f2f0;
    font: bold 65%/1.5 sans-serif;
    text-align: center;
    vertical-align: .3em;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 1px white
}

pre[data-line] .line-highlight[data-end]:after {
    content: attr(data-end);
    top: auto;
    bottom: .4em
}html body {
    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    line-height: 1.6;
    font-weight: 500;
    font-size: 14px;
    overflow-x: hidden;
    letter-spacing: 1px;
    color: #4f4f4f;
    /* background-color: #f4f5f5; */

    background-color: #fff;
    padding: 10px;
    text-align: justify;
    /* 文字两端对齐 */
    word-break: break-all;
    /* 最后一个单词挤不下时，先一个一个英文挤上去，实在挤不下的英文那就放第二行 */
}

/* 标签前的小标  🍲  \0000a0  ❤ */
/* 小标结束 */

html body .markdown-preview {
    background: -webkit-linear-gradient(top, transparent 19px, #efefef 20px),
        -webkit-linear-gradient(left, transparent 19px, #efefef 20px),
        #fff;
    background-size: 20px 20px;

    /* 位移一点 */
    /* width: 85% !important;
    top: 1vh !important;
    left: 50% !important;
    transform: translateX(-50%); */
    border-radius: 5px;
}

html body>:first-child {
    margin-top: 0
}



html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    line-height: 1;
    margin-top: 40px;
    margin-bottom: 16px;
}

html body h1 {
    font-size: 22px;
    color: #646464;
    position: relative;
    margin-bottom: 1.8em;
    text-align: center;
    border-bottom: 2px dotted #eea20a;
    padding: 20px;
    border-top: 2px dotted #eea20a;
    counter-reset: h2counter;
    z-index: 1;
}

html body h1::before {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 100px;
    height: 60px;
    background: url(https://s1.ax1x.com/2023/03/14/pplcbWV.png);
    background-size: 100%;
    z-index: -1;
}

html body h2 {
    font-size: 18px;
    color: #eea20a;
    counter-reset: h3counter;
}

html body h3 {
    font-size: 17px;
    color: #555cbe;
    counter-reset: h4counter;
}

html body h4 {
    font-size: 15px;
    color: #5a5a5a;
}

html body h5,
html body h6 {
    font-size: 15px;
    color: #5a5a5a;
    margin-bottom: 24px;
}

html body h2::before,
html body h3::before,
html body h4::before,
html body h5::before,
html body h6::before {
    min-width: 40px;
    display: inline-block;
    padding-right: 15px;
}

html body h2:before {
    counter-increment: h2counter;
    content: counter(h2counter);
}

html body h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter);
}

html body h4:before {
    counter-increment: h4counter;
    content: "（" counter(h4counter) "）";
    margin-left: -7px;
    padding-right: 20px;
}

html body h5:before {
    content: "❥";
    margin-left: 3px;
    padding-right: 12px;
}

html body h6:before {
    content: "(❥)";
}

html body strong {
    color: #fa6069;
    padding: 0 2px;
}

html body em {
    color: #4c9800;
    font-style: normal;
    padding: 0 2px;
}

html body em strong {
    color: #555cbe;
    padding: 20px 0 0 0;
    margin-left: -7px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
    display: inline-block;
}

html body em strong::after {
    content: "」";
}

html body em strong::before {
    content: "「";
}

html body del {
    color: #4f4f4f;
}

html body a:not([href]) {
    color: inherit;
    text-decoration: none
}

html body a {
    color: #ddd;
    text-decoration: none
}

html body a:hover {
    color: #cecece;
    text-decoration: none
}

html body img {
    max-width: 100%;
    border: 1px solid #f2f2f2;
    border-left: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-right: 3px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 8px;
    vertical-align: bottom;
    background-color: #ffffffc9;
    box-shadow: 5px 8px 9px -1px rgb(0 0 0 / 3%),
        0 3px 5px 0 rgb(0 0 0 / 3%),
        2px 3px 4px -1px rgb(0 0 0 / 4%);
}

html body img[src*='img_5'] {
    width: 50%;
}

html body img[src*='img_3'] {
    width: 33%;
}
html body img[src*='img_7'] {
    width: 70%;
}


html body ul.no-list,
html body ol.no-list {
    padding: 0;
    list-style-type: none
}

html body ul,
html body ol {
    margin-left: -20px;
    margin-top: 20px;
}

html body ol li,
html body ul li {
    margin-bottom: 18px;
    list-style: inherit;
}

html body ul li {
    list-style: square;
}

html body ol ul,
html body ol ol,
html body ul ul,
html body ul ol {
    padding-left: 5em;
    margin-top: 8px;
    font-size: 14px;
}

html body ol ul li,
html body ol ol li,
html body ul ul li,
html body ul ol li {
    margin-bottom: 7px;
}

html body ol li {
    padding-left: 6px;
}

html body .contains-task-list {
    padding-left: 110px;
}

html body .task-list-item {
    list-style: none;
}


html body li>p {
    margin-top: 0;
    margin-bottom: 0
}

html body .task-list-item-checkbox {
    margin: 0 .2em .25em -1.8em;
    vertical-align: middle
}

html body input[type=checkbox] {
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
    border-radius: 2px;
}

html body input[type=checkbox]::before {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: #FFF;
    border: 1px solid #555cbe;
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 1;
}

html body input[type=checkbox]:checked::after {
    position: absolute;
    top: -10px;
    left: 0px;
    content: "✓";
    color: #fa6069;
    font-size: 22px;
    font-weight: bold;
    z-index: 2;
}


html body blockquote {
    color: #666;
    padding: 8px 23px;
    margin: 6px 0;
    border-left: 4px solid #555cbe;
    background-color: #f3f4ff;
}

html body blockquote::after {
    display: block;
    content: '';
}

html body blockquote>p {
    margin: 16px 0;
}

html body blockquote>p>code {
    text-shadow: 0px 0px 1px #d7ffe5;
}


html body blockquote>:first-child {
    margin-top: 0
}

html body blockquote>:last-child {
    margin-bottom: 0
}

html body hr {
    border-top: 1px solid #ddd;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-top: 32px;
    margin-bottom: 32px;
}

html body table {
    display: inline-block !important;
    font-size: 14px;
    width: auto;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
    border-radius: 4px;
    background-color: #fff;
}

/* 自己加上 */
html body thead {
    background: #eff3f5;
    color: #555cbe;
    text-align: left;
}

html body tr:nth-child(2n) {
    background-color: #fcfcfc;
}

html body td {
    min-width: 120px;
}

html body table td,
html body table th {
    padding: 12px 10px;
    line-height: 24px;
    border: #e0e0e0 solid 1px;
}

html body dl {
    padding: 0
}

html body dl dt {
    padding: 0;
    margin-top: 16px;
    font-size: 1em;
    font-style: italic;
    font-weight: bold
}

html body dl dd {
    padding: 0 16px;
    margin-bottom: 16px
}

html body code {
    /* font-family: Source Code Pro, DejaVu Sans Mono, Ubuntu Mono, Anonymous Pro, Droid Sans Mono, Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, PingFang SC, Microsoft YaHei, sans-serif; */
    /* font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; */
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    overflow-x: auto;
    padding: 1px 2px;
    /* color: #4c9800;
    background-color: #fff; */
    color: #d70000;
    background-color: #ffefef;
    white-space: pre-line;
}

html body p mark {
    padding: 1.5px 3px;
    margin: 0 1px;
    background-color: #ff0;
}

html body code::before,
html body code::after {
    letter-spacing: -0.5em;
    content: "\00a0"
}

html body pre>code {
    font-size: 12px;
    font-family: inherit;
    color: #fff;
    letter-spacing: 1px;
    padding: 15px 12px;
    margin: 0;
    word-break: normal;
    display: block;
    overflow-x: auto;
    padding-left: 2em;
}

html body .highlight {
    margin-bottom: 16px
}

html body .highlight pre,
html body pre {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    position: relative;
}

html body .mume-header+pre {
    margin-top: inherit;
}

html body .highlight pre {
    margin-bottom: 0;
    word-break: normal
}

html body pre code,
html body pre tt {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0
}

html body pre code:before,
html body pre tt:before,
html body pre code:after,
html body pre tt:after {
    content: normal
}

html body kbd {
    color: #2f2f2f;
    border: 1px solid #43484c;
    padding: 2px 4px;
    border-radius: 3px
}

@media print {
    html body {
        background-color: #1d1f21
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6 {
        color: #fff;
        page-break-after: avoid
    }

    html body blockquote {
        color: #9ba09d
    }

    html body pre {
        page-break-inside: avoid
    }

    html body table {
        display: table
    }

    html body img {
        display: block;
        max-width: 100%;
        max-height: 100%
    }

    html body pre,
    html body code {
        word-wrap: break-word;
        white-space: pre
    }
}

html body a {
    text-decoration: none;
    color: #4ea1db;
    border-bottom: 1px solid #a5c7e7;
}

html body a:hover,
html body a:active {
    color: #275b8c;
}

/* ---滚动条--- */

/* 整个滚动条 */
html body .md-sidebar-toc::-webkit-scrollbar,
::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 8px !important;
    /* 对应横向滚动条的宽度 */
    height: 8px;
    margin-right: 20px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #dedede !important;
    border-radius: 10px !important;
    border: 0 !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a1a1a1 !important;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #fcfcfc !important;
    border-radius: 32px;
}

/* ----------------------- */

/* --- 侧边栏及内容整体宽度 --- */
body {
    display: flex;
    flex-direction: row-reverse;
}

.md-sidebar-toc .md-toc .md-toc-link-wrapper a {
    /* margin-left: -3px; */
    border-bottom: 0;
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc {
    /* width: 350px !important; */
    width: fit-content !important;
    overflow-y: scroll !important;
    height: 100vh !important;
    position: inherit !important;
    padding-top: 6px !important;
}

@media screen and (min-width: 914px) {
    html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        padding: 2em calc(37% - 457px + 2em) !important;
    }
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc {
    font-size: 9px;
    line-height: 3.3em;
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc details summary.md-toc-link-wrapper {
    margin-left: 3px;
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc details summary a {
    padding-left: 5px !important;
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
    width: calc(100% - 350px) !important;
    margin-left: 8px !important;
    padding: 2em calc(34% - 536px + 2em) !important;
    overflow-y: scroll;
    height: 100vh;
    flex: 1;
    position: initial !important;
}

/* ----------------------- */

/* 去掉开关图标，对齐 */
.md-sidebar-toc ul,
.md-sidebar-toc ol {
    display: inline-block;
    padding: 0;
    margin: 0
}

.md-sidebar-toc ul li,
.md-sidebar-toc ol li {
    margin-bottom: 0;
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc details summary.md-toc-link-wrapper {
    margin-left: 13px;
}

.md-toc-link-wrapper {
    /* display: block; */
    padding-right: 20px;
    list-style: none !important;
}

.preview-container.show-sidebar-toc .md-sidebar-toc details summary.md-toc-link-wrapper {
    margin-left: 15px;
}

summary+div {
    margin-left: 16px;
}

/* ----------------------- */


/* vscode 预览 左右布局优化 */
.preview-container .mume[for="preview"].hidden-preview {
    display: none;
}

.preview-container {
    display: flex !important;
    flex-direction: row !important;
}

.preview-container .mume {
    flex: 1 1 !important;
}

.preview-container.show-sidebar-toc .md-sidebar-toc {
    width: fit-content !important;
    line-height: 2.5em;
    padding-top: 6px !important;
}

/* ----------------------- */


/* 目录贴边优化 */
.md-sidebar-toc .md-toc {
    padding: 4px 8px 4px 4px!important;
}

.md-sidebar-toc .md-toc>details:nth-child(1)>summary::before {
    content: '《';
}

.md-sidebar-toc .md-toc>details:nth-child(1)>summary::after {
    content: ' 》';
    padding-left: 5px;
}

.md-sidebar-toc .md-toc>details>summary+div {
    margin-left: -8px;
}

.preview-container.show-sidebar-toc .mume,
.preview-container.show-sidebar-toc .md-sidebar-toc {
    height: 100vh !important;
    position: initial !important;
    overflow-y: scroll;
}

.preview-container #md-toolbar {
    right: 100px !important;
}

.preview-container.show-sidebar-toc .md-sidebar-toc details summary a {
    padding-left: 2px !important;
}

/* ----------------------- */


/* 左右分栏 （注意div内需要一个tab，否则会影响标题显示） */
.wrap2 {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.wrap2 .box {
    width: 48%;
}

.wrap2 .box:nth-child(1) {
    padding-right: 2%;
    border-right: 1px solid #ddd;
}

.wrap2 .box.lit3 {
    width: 30%;
}

.wrap2 .box.lit7 {
    width: 66%;
}

.wrap2 .box.lit4 {
    width: 35%;
}

.wrap2 .box.lit6 {
    width: 61%;
}

.wrap2 .box>p:first-child,
.wrap2 .box>p:first-child em strong {
    margin-top: 0;
    padding-top: 0;
}

/* ----------------------- */


/* 方便复制的小代码 */
html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview {
    /* 解决fixed不生效问题 */
    left: 0;
    transform: translateX(0);
}

.fix {
    position: fixed;
    width: 200px;
    height: 35px;
    bottom: 10px;
    right: 10px;
    z-index: 999;
    border-radius: 4px;
    outline: 5px solid #ffeead;
    background-color: white;
    border: 1px solid #d9534f;
    box-sizing: border-box;
    padding: 5px;
    transition: height 1s 1s;
    overflow: hidden;
}
.fix >p,.fix strong {
    margin-top: 0;
    padding-top: 0;
}

.fix:hover {
    height: 700px;
    transition: all 1s 0s;
    overflow: scroll;
}

/* ----------------------- */


/* 添加标题序号，遮住文章内容的序号，保留目录序号 */
/* html body h2:before,
html body h3:before,
html body h4:before {
    padding-right: 10px;
    background-color: #fff;
    margin-right: -22px;
    z-index: 99;
    position: relative;
    height: 1.1em;
}

html body h2:before {
    margin-right: -22px;
}
html body h3:before {
    margin-right: -40px;
}
html body h4:before {
    margin-right: -46px;
} */

/* ----------------------- */

/* 宽度100， */
.tabb {
    width: 100px;
    display: inline-block;
}

/* ----------------------- */
.markdown-preview {
    width: 100%;
    height: 100%;
    box-sizing: border-box
}

.markdown-preview .pagebreak,
.markdown-preview .newpage {
    page-break-before: always
}

.markdown-preview pre.line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber
}

.markdown-preview pre.line-numbers>code {
    position: relative
}

.markdown-preview pre.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 1em;
    font-size: 100%;
    left: 0;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.markdown-preview pre.line-numbers .line-numbers-rows>span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber
}

.markdown-preview pre.line-numbers .line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: .8em;
    text-align: right
}

.markdown-preview .mathjax-exps .MathJax_Display {
    text-align: center !important
}

.markdown-preview:not([for="preview"]) .code-chunk .btn-group {
    display: none
}

.markdown-preview:not([for="preview"]) .code-chunk .status {
    display: none
}

.markdown-preview:not([for="preview"]) .code-chunk .output-div {
    margin-bottom: 16px
}

.markdown-preview .md-toc {
    padding: 0
}

.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link {
    display: inline;
    padding: .25rem 0
}

.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p,
.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div {
    display: inline
}

.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link {
    font-weight: 800
}

.scrollbar-style::-webkit-scrollbar {
    width: 8px
}

.scrollbar-style::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.scrollbar-style::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(150, 150, 150, 0.66);
    border: 4px solid rgba(150, 150, 150, 0.66);
    background-clip: content-box
}

html body[for="html-export"]:not([data-presentation-mode]) {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: auto
}

html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
    position: relative;
    top: 0
}

@media screen and (min-width:914px) {
    html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        padding: 2em calc(50% - 457px + 2em)
    }
}

@media screen and (max-width:914px) {
    html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        padding: 2em
    }
}

@media screen and (max-width:450px) {
    html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        font-size: 14px !important;
        padding: 1em
    }
}

@media print {
    html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
        display: none
    }
}

html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
    position: fixed;
    bottom: 8px;
    left: 8px;
    font-size: 28px;
    cursor: pointer;
    color: inherit;
    z-index: 99;
    width: 32px;
    text-align: center;
    opacity: .4
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn {
    opacity: 1
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    padding: 32px 0 48px 0;
    font-size: 14px;
    box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
    box-sizing: border-box;
    overflow: auto;
    background-color: inherit
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar {
    width: 8px
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(150, 150, 150, 0.66);
    border: 4px solid rgba(150, 150, 150, 0.66);
    background-clip: content-box
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a {
    text-decoration: none
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc {
    padding: 0 16px
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link {
    display: inline;
    padding: .25rem 0
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p,
html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div {
    display: inline
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link {
    font-weight: 800
}

html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
    left: 300px;
    width: calc(100% - 300px);
    padding: 2em calc(50% - 457px - 300px/2);
    margin: 0;
    box-sizing: border-box
}

@media screen and (max-width:1274px) {
    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
        padding: 2em
    }
}

@media screen and (max-width:450px) {
    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
        width: 100%
    }
}

html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview {
    left: 50%;
    transform: translateX(-50%)
}

html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc {
    display: none
}

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  tocNumberHidden">
      <style>/* 添加标题序号，遮住文章内容的序号，保留目录序号 */
html body h2:before,
html body h3:before,
html body h4:before,
html body h5:before {
  padding-right: 10px;
  background-color: #fff;
  margin-right: -22px;
  z-index: 99;
  position: relative;
  height: 1.1em;
}
html body h2:before {
  margin-right: -22px;
}
html body h3:before {
  margin-right: -40px;
}
html body h4:before {
  margin-right: -46px;
}
html body h5:before {
  margin-right: -15px;
}
/* ----------------------- */
</style>
<h1 class="mume-header" id="%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5">&#x4F7F;&#x7528;&#x653B;&#x7565;</h1>

<p>&#x5EFA;&#x8BAE;&#x67E5;&#x770B;&#x5E26;&#x6709;&#x6837;&#x5F0F;&#x7684;readme.html&#x6587;&#x4EF6;</p>
<h2 class="mume-header" id="1-%E6%95%88%E6%9E%9C%E5%9B%BE%E5%8F%82%E8%80%83">1. &#x6548;&#x679C;&#x56FE;&#x53C2;&#x8003;</h2>

<p><img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513160456.png" alt="20230513160456"></p>
<h2 class="mume-header" id="2-%E5%AE%89%E8%A3%85">2. &#x5B89;&#x88C5;</h2>

<p>&#x901F;&#x89C8;&#xFF1A;</p>
<ol>
<li>
<p>vscode &#x5B89;&#x88C5;mark all in one&#x3001;<a href="https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/">Markdown Preview Enhanced</a> &#x63D2;&#x4EF6;</p>
</li>
<li>
<p>css&#x65B9;&#x5F0F;&#x4E8C;&#xFF0C; <code>preview_theme</code> &#x548C; <code>prism_theme</code> &#x4E2D;&#x7684;<code>pepper</code>&#x76F8;&#x5173;&#x6587;&#x4EF6;&#x653E;&#x5230;&#x5BF9;&#x5E94;&#x7684;&#x672C;&#x5730;&#x6587;&#x4EF6;&#x5939;&#x4E2D;&#xFF0C;&#x5728;<code>setting.json</code> &#x8C03;&#x7528;</p>
</li>
</ol>
<p><img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/a96bb5db3ce6cd8c46331e5425180caa3990fef1a32c24929ed6f97cbe1b68e3.png" alt="&#x56FE; 2"></p>
<ol start="3">
<li><code>my_mume</code>&#x7684;js&#x6587;&#x4EF6;&#x653E;&#x5728;&#x672C;&#x5730;<code>.mume</code>&#x6587;&#x4EF6;&#x5939;&#x4E2D;</li>
</ol>
<p><img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230515163800.png" alt="20230515163800"></p>
<ol>
<li>tocNumberHidden.less<a href="#45-%E6%A0%87%E9%A2%98%E5%BA%8F%E5%8F%B7">&#x6309;&#x9700;&#x8C03;&#x7528;</a></li>
</ol>
<h3 class="mume-header" id="21-css">2.1. css</h3>

<h4 class="mume-header" id="1-%E6%96%B9%E5%BC%8F%E4%B8%80%E6%8F%92%E4%BB%B6%E8%87%AA%E5%B8%A6">&#xFF08;1&#xFF09; &#x65B9;&#x5F0F;&#x4E00;&#xFF1A;&#x63D2;&#x4EF6;&#x81EA;&#x5E26;</h4>

<ol>
<li>&#x63D2;&#x4EF6;Markdown Preview Enhanced&#x6709;<em>&#x5B98;&#x7F51;&#x63A8;&#x8350;</em>&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x5728;.mume/style.less&#x4E0B;&#x7F16;&#x8F91;</li>
<li>&#x6587;&#x4EF6;&#x5939;<code>my-mume</code>&#x7684;css&#x6587;&#x4EF6;&#x66FF;&#x6362;&#x5230;&#x672C;&#x5730;<code>.mume</code>&#x6587;&#x4EF6;&#x5939;</li>
<li>&#x8BE5;&#x6587;&#x4EF6;&#x5DF2;<strong>&#x5305;&#x542B;&#x4EE3;&#x7801;&#x9AD8;&#x4EAE;&#x6837;&#x5F0F;</strong></li>
</ol>
<p><em><strong>&#x6CE8;&#x610F;</strong></em></p>
<ol>
<li><strong>2023.5.14&#x540E;&#x4E0D;&#x66F4;&#x65B0;</strong></li>
<li><strong>&#x8BE5;&#x6587;&#x4EF6;&#x672A;&#x4F18;&#x5316;&#xFF01;</strong>&#xFF0C;&#x7ECF;&#x5386;&#x4E86; less &#x1F449; css &#x1F449; less &#x1F449; css&#xFF0C;&#x53D1;&#x73B0;style.less&#x6709;&#x4E9B;&#x5730;&#x65B9;&#x5199;&#x4E86;@important&#x4ECD;&#x65E0;&#x6CD5;&#x76F4;&#x63A5;&#x8986;&#x76D6;<code>preview_theme</code>&#x7684;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF0C;&#x7785;&#x4E00;&#x773C;&#x5C31;&#x6709;&#x597D;&#x51E0;&#x5904;&#xFF01;&#xFF01;&#x539F;&#x6765;&#x7684;pepper.css&#x662F;&#x53EF;&#x4EE5;&#x7684;&#xFF0C;&#x61D2;&#x5F97;&#x4E00;&#x4E2A;&#x4E2A;&#x627E;&#x53C8;&#x4E00;&#x4E2A;&#x4E2A;&#x6539;&#x4E86;&#xFF0C;&#x5C31;&#x8FD9;&#x6837;&#x5427;&#xFF0C;&#x65B9;&#x5F0F;&#x4E8C;&#xFF01;&#x1F447;</li>
</ol>
<h4 class="mume-header" id="2-%E6%96%B9%E5%BC%8F%E4%BA%8C%E6%96%87%E4%BB%B6%E5%A4%B9%E6%9B%BF%E6%8D%A2-">&#xFF08;2&#xFF09; &#x65B9;&#x5F0F;&#x4E8C;&#xFF1A;&#x6587;&#x4EF6;&#x5939;&#x66FF;&#x6362; &#x2B50;</h4>

<ol>
<li>&#x628A;<code>preview_theme</code> &#x548C; <code>prism_theme</code> &#x4E2D;&#x7684;pepper&#x76F8;&#x5173;&#x6587;&#x4EF6;&#x653E;&#x5230;&#x5BF9;&#x5E94;&#x7684;&#x6587;&#x4EF6;&#x5939;&#x4E2D;</li>
<li>&#x5728;<code>setting.json</code> &#x8C03;&#x7528;</li>
</ol>
<p>setting.json &#x914D;&#x7F6E;&#x53C2;&#x8003;</p>
<pre data-role="codeBlock" data-info="javascript" class="language-javascript"><span class="token punctuation">{</span>
    <span class="token string">&quot;markdown-preview-enhanced.previewTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pepper.css&quot;</span><span class="token punctuation">,</span> <span class="token comment">//&#x4F7F;&#x7528;&#x81EA;&#x5DF1;&#x7684;css pepper.css</span>
    <span class="token string">&quot;markdown-preview-enhanced.codeBlockTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pepperLight.css&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;markdown-preview-enhanced.printBackground&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//&#x4F7F;&#x7528;&#x81EA;&#x5DF1;&#x7684;css&#x6253;&#x5370;html/pdf</span>
    <span class="token string">&quot;[markdown]&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;editor.defaultFormatter&quot;</span><span class="token operator">:</span> <span class="token string">&quot;DavidAnson.vscode-markdownlint&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">&quot;markdown.extension.toc.levels&quot;</span><span class="token operator">:</span> <span class="token string">&quot;2..4&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;markdown-preview-enhanced.enableExtendedTableSyntax&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token string">&quot;markdown-preview-enhanced.enableScriptExecution&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token string">&quot;markdownlint.config&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">&quot;MD029&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token string">&quot;MD033&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre><h3 class="mume-header" id="22-js">2.2. js</h3>

<p><a href="#4-%E5%8A%9F%E8%83%BD">&#x81EA;&#x5B9A;&#x4E49;&#x8C03;&#x7528;class</a>&#x65B9;&#x6CD5;&#xFF0C;&#x6839;&#x636E;<a href="https://zhuanlan.zhihu.com/p/532888400?utm_id=0">&#x300A;&#x7231;&#x5403;&#x7684;&#x5C0F;&#x767D;-MPE&#x7684;&#x4F7F;&#x7528;&#x300B;</a>&#x4FEE;&#x6539;&#xFF0C;&#x6587;&#x4EF6;&#x5939;<code>my-mume</code>&#x7684;js&#x6587;&#x4EF6;&#x66FF;&#x6362;&#x5230;&#x672C;&#x5730;.mume&#x6587;&#x4EF6;&#x5939;</p>
<h2 class="mume-header" id="3-%E6%A0%87%E9%A2%98%E4%BD%BF%E7%94%A8%E8%A7%84%E8%8C%83">3. &#x6807;&#x9898;&#x4F7F;&#x7528;&#x89C4;&#x8303;</h2>

<table>
<thead>
<tr>
<th>&#x6807;&#x9898;&#x4F4D;&#x7F6E;</th>
<th>&#x5199;&#x6CD5;</th>
<th>&#x6548;&#x679C;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x6587;&#x7AE0;&#x6807;&#x9898;</td>
<td><code># &#x6587;&#x7AE0;&#x6807;&#x9898;</code></td>
<td>&#x6587;&#x7AE0;&#x6807;&#x9898;</td>
</tr>
<tr>
<td>&#x7B2C;&#x4E00;&#x7AE0;</td>
<td><code># &#x7B2C;&#x4E00;&#x7AE0;</code></td>
<td>1&#x3000;&#x7B2C;&#x4E00;&#x7AE0;</td>
</tr>
<tr>
<td>&#x7B2C;&#x4E00;&#x8282;</td>
<td><code>## &#x7B2C;&#x4E00;&#x8282;</code></td>
<td>1.1&#x3000;&#x7B2C;&#x4E00;&#x8282;</td>
</tr>
<tr>
<td>&#x7B2C;&#x4E00;&#x6BB5;</td>
<td><code>### &#x7B2C;&#x4E00;&#x6BB5;</code></td>
<td>&#xFF08;1&#xFF09;&#x3000;&#x7B2C;&#x4E00;&#x6BB5;</td>
</tr>
<tr>
<td>&#x9700;&#x8981;&#x5728;&#x76EE;&#x5F55;&#x663E;&#x793A;&#x7684;</td>
<td><code>#### xxx</code></td>
<td>.<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513191052.png" alt="20230513191052"></td>
</tr>
<tr>
<td>&#x4E0D;&#x9700;&#x8981;&#x5728;&#x76EE;&#x5F55;&#x663E;&#x793A;&#x7684;</td>
<td><code>***&#x6548;&#x679C;***</code></td>
<td>.<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513191322.png" alt="20230513191322"></td>
</tr>
</tbody>
</table>
<h2 class="mume-header" id="4-%E5%8A%9F%E8%83%BD">4. &#x529F;&#x80FD;</h2>

<p>&#x8C03;&#x7528;&#x6837;&#x5F0F;&#x89C4;&#x5219;<br>
&#x5F00;&#x59CB;&#xFF1A;<code>/.cssname &lt;</code><br>
&#x7ED3;&#x675F;&#xFF1A;<code>/&gt;</code></p>
<h3 class="mume-header" id="41-%E5%8F%B3%E4%B8%8B%E8%A7%92%E7%9A%84%E6%8F%90%E7%A4%BA-fix">4.1. &#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x63D0;&#x793A; <code>/.fix</code></h3>

<p>&#x79FB;&#x5165;&#x663E;&#x793A;&#xFF0C;&#x79FB;&#x51FA;&#x4EC5;&#x5269;&#x4E00;&#x884C;</p>
<p><em><strong>&#x6548;&#x679C;</strong></em><br>
&#x79FB;&#x51FA;&#xFF1A;<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513153138.png" alt="20230513153138"> &#x79FB;&#x5165;&#xFF1A;<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230514023551.png" alt="20230514023551"></p>
<h3 class="mume-header" id="42-%E5%B7%A6%E5%8F%B3%E5%88%86%E6%A0%8F-wrap2">4.2. &#x5DE6;&#x53F3;&#x5206;&#x680F; <code>/.wrap2</code></h3>

<p>&#x90E8;&#x5206;&#x5185;&#x5BB9;&#x60F3;&#x505A;&#x5DE6;&#x53F3;&#x5BF9;&#x6BD4;&#x53C2;&#x8003;&#x6548;&#x679C;&#xFF0C;&#x5982;&#xFF1A;html&#x548C;js&#x5199;&#x5B8C;&#x5360;&#x636E;&#x5927;&#x91CF;&#x7684;&#x9AD8;&#x5EA6;&#x3001;&#x4E24;&#x8FB9;&#x4EE3;&#x7801;&#x5BF9;&#x6BD4;&#x7B49;</p>
<p><em><strong>&#x7528;&#x6CD5;</strong></em></p>
<p>55&#x5F00;</p>
<p><code>/.wrap2 &lt;</code><br>
<code>/.box &lt;</code> <code>/&gt;</code><br>
<code>/.box &lt;</code> <code>/&gt;</code><br>
<code>/&gt;</code></p>
<p>37&#x5F00;</p>
<p><code>/.wrap2 &lt;</code><br>
<code>/.box lit3 &lt;</code> <code>/&gt;</code><br>
<code>/.box lit7 &lt;</code> <code>/&gt;</code><br>
<code>/&gt;</code></p>
<p>46&#x5F00; &#x540C;&#x7406; lit4  lit6</p>
<p><em><strong>ps</strong></em></p>
<ol>
<li>&#x5176;&#x4ED6;&#x7684;&#x53EF;&#x4EE5;&#x81EA;&#x5DF1;&#x53BB;&#x8865;&#x5145;</li>
<li><mark>&#x51FA;&#x73B0;&#x5F02;&#x5E38;&#xFF01;</mark> &#x5F53;&#x5DE6;&#x53F3;&#x5206;&#x680F;&#x7684;&#x591A;&#x884C;&#x4EE3;&#x7801;&#x5757;&#x5185;<strong>&#x51FA;&#x73B0;&#x2193;</strong> &#x6216; <strong>&#x76EE;&#x5F55;&#x6D88;&#x5931;</strong>&#x65F6;&#xFF0C;&#x4EE3;&#x7801;&#x5757;&#x52A0;&#x4E00;&#x683C;tab&#x5373;&#x53EF;<br>
<code>&lt;p data-line=&quot;60&quot; class=&quot;sync-line&quot; style=&quot;margin:0;&quot;&gt;&lt;/p&gt;</code></li>
<li>&#x5E76;&#x6CA1;&#x6709;&#x5F88;&#x4E25;&#x683C;&#x7684;30% 70% 40% 60%&#xFF0C;&#x5927;&#x6982;</li>
</ol>
<p><em><strong>&#x6548;&#x679C;</strong></em></p>
<p>55&#x5F00;<br>
<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513154527.png" alt="20230513154527"></p>
<p>73&#x5F00;<br>
<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513154606.png" alt="20230513154606"></p>
<h3 class="mume-header" id="43-%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F-img_7">4.3. &#x56FE;&#x7247;&#x5927;&#x5C0F; <code>#img_7</code></h3>

<p><code>=100x100</code> &#x5728;vscode&#x65E0;&#x6CD5;&#x4F7F;&#x7528;&#xFF0C;&#x88C5;&#x4E86;&#x51E0;&#x4E2A;&#x63D2;&#x4EF6;&#x90FD;&#x4E0D;&#x884C;</p>
<p>&#x4F7F;&#x7528;&#xFF1A;</p>
<p><code>![xxx](xx.png#img_5)</code></p>
<p><code>![xxx](xx.png#img_3)</code></p>
<h3 class="mume-header" id="44-%E6%96%87%E5%AD%97%E9%97%B4%E9%9A%94--">4.4. &#x6587;&#x5B57;&#x95F4;&#x9694; <code>/--</code></h3>

<p>&#x5B9E;&#x73B0;&#x6548;&#x679C;<br>
<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230516224807.png" alt="20230516224807"></p>
<p>&#x5DE6;&#x4FA7;&#x6587;&#x5B57;&#x6709;&#x56FA;&#x5B9A;&#x7684;&#x5BBD;&#x5EA6;100px</p>
<p>&#x4F7F;&#x7528;&#x65B9;&#x6CD5; <code>/--split &#x5C06;&#x5B57;&#x7B26;&#x4E32;&#x8F6C;&#x5316;&#x4E3A;&#x6570;&#x7EC4;</code></p>
<p>&#x6CE8;&#x610F;&#x5728; split &#x540E;&#x9762;&#x52A0;&#x7A7A;&#x683C;&#x4EE5;&#x4F5C;&#x533A;&#x5206;</p>
<h3 class="mume-header" id="45-%E6%A0%87%E9%A2%98%E5%BA%8F%E5%8F%B7">4.5. &#x6807;&#x9898;&#x5E8F;&#x53F7;</h3>

<p>&#x6211;&#x7684;&#x76EE;&#x7684;&#xFF1A;<strong>&#x4EC5;&#x663E;&#x793A;&#x4FA7;&#x8FB9;&#x680F;&#x7684;&#x76EE;&#x5F55;</strong>&#xFF0C;pepper.css&#x5185;&#x5DF2;&#x6709;&#x5B9A;&#x4E49;&#x6709;&#x6807;&#x9898;&#x5E8F;&#x53F7;</p>
<ol>
<li>
<p>ctrl shift p &#x9009;&#x62E9;&#x6DFB;&#x52A0;&#x7AE0;&#x8282;&#x5E8F;&#x53F7;</p>
</li>
<li>
<p><strong>&#x67D0;&#x4E2A;&#x6587;&#x4EF6;</strong>&#x8981;&#x4FA7;&#x8FB9;&#x680F;&#xFF08;&#x5168;&#x90E8;&#x770B;3&#xFF09;&#xFF0C;<code>my_mume</code>&#x6587;&#x4EF6;&#x5939;&#x5185;&#x590D;&#x5236; <code>tocNumberHidden.less</code> &#x653E;&#x5728;&#x53EF;&#x4EE5;&#x8C03;&#x7528;&#x7684;&#x4F4D;&#x7F6E;</p>
</li>
<li>
<p>md&#x6587;&#x4EF6;&#x4E2D;&#x5F15;&#x5165;&#xFF01;</p>
</li>
</ol>
<pre data-role="codeBlock" data-info="html" class="language-html">---
html:
  toc: true
class: &quot;tocNumberHidden&quot;
---

@import &quot;../assets/themesStyle/tocNumberHidden.less&quot;
</pre><ol start="3">
<li><strong>&#x5168;&#x90E8;&#x7684;&#x6587;&#x4EF6;</strong>&#x5168;&#x8981;&#x4FA7;&#x8FB9;&#x680F;&#x76EE;&#x5F55;&#xFF0C;&#x91CA;&#x653E;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#xFF1A;</li>
</ol>
<p><img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513152113.png" alt="20230513152113"></p>
<p><em><strong>&#x6548;&#x679C;</strong></em><br>
<img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513190249.png" alt="20230513190249"> &#x1F449; <img src="https://hippyoo-img-1259521706.cos.ap-guangzhou.myqcloud.com/markdown_img/20230513190221.png" alt="20230513190221"></p>
<ol start="4">
<li>&#x5173;&#x4E8E;&#x5C06;<code>3.1.1</code>&#x8FD9;&#x79CD;&#xFF0C;&#x60F3;&#x6539;&#x6210;<code>&#xFF08;1&#xFF09;</code>&#xFF0C;&#x5229;&#x7528;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;&#x66F2;&#x7EBF;&#x6551;&#x56FD;&#xFF0C;&#x5C31;&#x662F;&#x6709;&#x70B9;&#x9EBB;&#x70E6;
<ul>
<li>setting.json&#x6587;&#x4EF6;&#xFF0C;<code>&quot;markdown.extension.toc.levels&quot;: &quot;2..4&quot;</code></li>
<li><code>1.1.1.</code> &#x2192; <code>&#xFF08;1&#xFF09;</code>&#xFF0C;&#x67E5;&#x627E; <code>\s(\d+).(\d+).(\d+).\s</code> &#xFF0C;&#x66FF;&#x6362; <code>&#xFF08;$3&#xFF09;</code></li>
<li><code>1.1.1.1.</code> &#x2192; <code>&#x2765;</code>&#xFF0C;&#x67E5;&#x627E; <code>\s(\d+).(\d+).(\d+).(\d+).\s</code> &#xFF0C;&#x66FF;&#x6362; <code>&#x2765;</code></li>
<li>setting.json&#x6587;&#x4EF6;&#xFF0C;<code>&quot;markdown.extension.toc.levels&quot;: &quot;2..3&quot;</code></li>
<li>&#xFF08;&#x4E00;&#x822C;&#x56DB;&#x7EA7;&#x6807;&#x9898;&#x7684;&#x987A;&#x5E8F;&#x4E0D;&#x4F1A;&#x53D8;&#xFF0C;&#x4E8C;&#x4E09;&#x7EA7;&#x6807;&#x9898;&#x987A;&#x5E8F;&#x7ECF;&#x5E38;&#x53D8;&#xFF0C;&#x6240;&#x4EE5;&#x6362;&#x6210;2..3&#xFF09;</li>
</ul>
</li>
</ol>
<p><em><strong>PS</strong></em></p>
<ol>
<li>
<p>&#x5728;&#x6392;&#x5E8F;&#x5230;&#x53CC;&#x6570;&#x4EE5;&#x4E0A;&#xFF08;&#x5982;10&#x3001;11&#xFF09;&#x65F6;&#xFF0C;&#x4F1A;&#x6709;&#x6F0F;&#x51FA;<code>.</code></p>
</li>
<li>
<p>&#x5DF2;&#x6839;&#x636E;&#x6807;&#x9898;&#x5185;&#x5BB9;&#x81EA;&#x5B9A;&#x4E49;&#x4FA7;&#x8FB9;&#x680F;&#x5BBD;&#x5EA6;</p>
</li>
</ol>
<h2 class="mume-header" id="5-%E5%BE%85%E5%A1%AB%E7%9A%84%E5%9D%91">5. &#x5F85;&#x586B;&#x7684;&#x5751;</h2>

<p>&#x8FD8;&#x6CA1;&#x586B;&#x5B8C;&#xFF0C;&#x54ED;&#x778E;&#x4E86;</p>
<ol>
<li>&#x4F7F;&#x7528;&#x591A;&#x4E2A;&#x5DE6;&#x53F3;&#x5E03;&#x5C40;&#xFF0C;&#x7F16;&#x8F91;&#x6846;&#x8DDF;&#x9884;&#x89C8;&#x6846;&#x4E0D;&#x540C;&#x6B65;</li>
<li>&#x56FE;&#x7247;&#x94FE;&#x63A5;&#x7684;&#x5927;&#x5C0F;&#x6539;&#x6210;=&#x5BBD;x&#x9AD8;</li>
<li>&#x76F4;&#x63A5;&#x628A;&#x4FA7;&#x8FB9;&#x680F;&#x76EE;&#x5F55;&#x81EA;&#x5B9A;&#x4E49;&#x5E8F;&#x53F7; 1. 1.1 &#xFF08;1&#xFF09; &#xFF0C;&#x540E;&#x9762;&#x7684;&#x6807;&#x9898;&#x4E0D;&#x663E;&#x793A;</li>
</ol>

      </div>
      <div class="md-sidebar-toc">
<div class="md-toc">
<details style="padding:0;;padding-left:0px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#&#x4F7F;&#x7528;&#x653B;&#x7565;" class="md-toc-link"><p>&#x4F7F;&#x7528;&#x653B;&#x7565;</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#1-&#x6548;&#x679C;&#x56FE;&#x53C2;&#x8003;" class="md-toc-link">
            <ol>
<li>&#x6548;&#x679C;&#x56FE;&#x53C2;&#x8003;</li>
</ol>

          </a></div><details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#2-&#x5B89;&#x88C5;" class="md-toc-link"><ol start="2">
<li>&#x5B89;&#x88C5;</li>
</ol>
</a>
          </summary>
        <div>
          <details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#21-css" class="md-toc-link"><p>2.1. css</p>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#1-&#x65B9;&#x5F0F;&#x4E00;&#x63D2;&#x4EF6;&#x81EA;&#x5E26;" class="md-toc-link">
            <p>&#xFF08;1&#xFF09; &#x65B9;&#x5F0F;&#x4E00;&#xFF1A;&#x63D2;&#x4EF6;&#x81EA;&#x5E26;</p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#2-&#x65B9;&#x5F0F;&#x4E8C;&#x6587;&#x4EF6;&#x5939;&#x66FF;&#x6362;-" class="md-toc-link">
            <p>&#xFF08;2&#xFF09; &#x65B9;&#x5F0F;&#x4E8C;&#xFF1A;&#x6587;&#x4EF6;&#x5939;&#x66FF;&#x6362; &#x2B50;</p>

          </a></div>
        </div>
      </details>
    <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#22-js" class="md-toc-link">
            <p>2.2. js</p>

          </a></div>
        </div>
      </details>
    <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#3-&#x6807;&#x9898;&#x4F7F;&#x7528;&#x89C4;&#x8303;" class="md-toc-link">
            <ol start="3">
<li>&#x6807;&#x9898;&#x4F7F;&#x7528;&#x89C4;&#x8303;</li>
</ol>

          </a></div><details style="padding:0;;padding-left:24px;" open>
        <summary class="md-toc-link-wrapper">
          <a href="#4-&#x529F;&#x80FD;" class="md-toc-link"><ol start="4">
<li>&#x529F;&#x80FD;</li>
</ol>
</a>
          </summary>
        <div>
          <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#41-&#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x63D0;&#x793A;-fix" class="md-toc-link">
            <p>4.1. &#x53F3;&#x4E0B;&#x89D2;&#x7684;&#x63D0;&#x793A; <code>/.fix</code></p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#42-&#x5DE6;&#x53F3;&#x5206;&#x680F;-wrap2" class="md-toc-link">
            <p>4.2. &#x5DE6;&#x53F3;&#x5206;&#x680F; <code>/.wrap2</code></p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#43-&#x56FE;&#x7247;&#x5927;&#x5C0F;-img_7" class="md-toc-link">
            <p>4.3. &#x56FE;&#x7247;&#x5927;&#x5C0F; <code>#img_7</code></p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#44-&#x6587;&#x5B57;&#x95F4;&#x9694;--" class="md-toc-link">
            <p>4.4. &#x6587;&#x5B57;&#x95F4;&#x9694; <code>/--</code></p>

          </a></div><div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#45-&#x6807;&#x9898;&#x5E8F;&#x53F7;" class="md-toc-link">
            <p>4.5. &#x6807;&#x9898;&#x5E8F;&#x53F7;</p>

          </a></div>
        </div>
      </details>
    <div class="md-toc-link-wrapper" style="padding:0;;display:list-item;list-style:square;margin-left:42px">
          <a href="#5-&#x5F85;&#x586B;&#x7684;&#x5751;" class="md-toc-link">
            <ol start="5">
<li>&#x5F85;&#x586B;&#x7684;&#x5751;</li>
</ol>

          </a></div>
        </div>
      </details>
    
</div>
</div>
      <a id="sidebar-toc-btn">&#x2261;</a>
    
    
    
    
    
    
    
    
<script>
document.body.setAttribute('html-show-sidebar-toc', true)
var sidebarTOCBtn = document.getElementById('sidebar-toc-btn')
sidebarTOCBtn.addEventListener('click', function(event) {
  event.stopPropagation()
  if (document.body.hasAttribute('html-show-sidebar-toc')) {
    document.body.removeAttribute('html-show-sidebar-toc')
  } else {
    document.body.setAttribute('html-show-sidebar-toc', true)
  }
})
</script>
      
  
    </body></html>